<script setup>
import axios from "axios";
import {ref} from "vue";
const tableData = ref([])

const userData = ref(null);
const answerData=ref([]);

const storedData = localStorage.getItem('key');
if (storedData) {
  userData.value = JSON.parse(storedData);
}
const consultantId=userData.value.data.consultantId;
console.log(consultantId);
const showAllinfo=function (){
  axios.get("/courseQuestions/selectByConsultantId?id="+consultantId)
  .then((res)=>{
    console.log(res.data.data);
    tableData.value = res.data.data;
    // answerData.value=res.data.data[0].courseCommunications
    // console.log(answerData.value)
  })
      .catch((err)=>{
        console.log(err)
      })
}
let showdata=ref(false)
const addAnswer=function (index){
  answerData.value=tableData.value[index].courseCommunications
  console.log(answerData.value)
  showdata.value=!showdata.value
}

showAllinfo();
let QueName=ref("")
let showChange=ref(false)
let QueCid=ref(0)
let showAdd=ref(false)
//添加课程问题
const addQuestion=function (){
showChange.value=true
  showAdd.value=true
  showChangeBtn.value=false
}

const addFalse=function (){

  showChange.value=false
  QueName.value=""
  QueCid.value=0
}
const currentTime = ref('');
const addChangeTrue=function (){
console.log(consultantId)
  currentTime.value = new Date().toLocaleString();

console.log(currentTime.value)
  axios.post("/courseQuestions/insert",{
    questionTitle:QueName.value ,
    consultantId:consultantId ,
    publishTime: currentTime.value,
    courseId: QueCid.value
  })
      .then((res)=>{console.log(res.data)
    showAllinfo();
    showChange.value=false
    QueName.value=""
    QueCid.value=0
  })
      .catch(error=>{
        console.log(error)
      })
}

//删除课程
const del=function (index){
  axios.delete("/courseQuestions/deleteById?id="+tableData.value[index].questionId)
      .then((res)=>{
        console.log(res.data);
        showAllinfo();
      })
      .catch(error=>{
        console.log(error)
      })
}
let showChangeBtn=ref(false)
//更改问题
let QueId=ref(0)
const changeInfo=function (index){
  showChangeBtn.value=true
  showChange.value=true
  QueName.value=tableData.value[index].questionTitle
  QueCid.value=tableData.value[index].courseId
  QueId.value=tableData.value[index].questionId
  console.log(QueName.value)
  console.log(QueCid.value)
  console.log(QueId.value)
}
//确认更改问题
const addBianTrue=function (){
axios.put("/courseQuestions/updateById",{
  questionId:QueId.value,
  questionTitle:QueName.value,
  courseId: QueCid.value
})
    .then((res)=>{console.log(res.data)
  showAllinfo();
  showChange.value=false
  QueName.value=""
  QueCid.value=0
  showChangeBtn.value=false
})
    .catch(error=>{
      console.log(error)
    })
}

</script>


<template>

<div class="box">
      <button @click="addQuestion" style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none">添加</button>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="consultantId" label="课程id" width="180"/>
    <el-table-column prop="questionTitle" label="课程问题" width="180"/>
    <el-table-column prop="publishTime" label="课程问题时间" width="180  "/>
    <el-table-column label="显示答案" width="150">
      <template #default="scope">
        <button @click="addAnswer(scope.$index)"  style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none">回答</button>
      </template>
    </el-table-column>

    <el-table-column label="编辑问题" width="150">
      <template #default="scope">
        <button @click="changeInfo(scope.$index)"  style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none">编辑</button>
      </template>
    </el-table-column>
    <el-table-column label="删除问题" width="150">
      <template #default="scope">
        <button @click="del(scope.$index)"  style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none">删除</button>
      </template>
    </el-table-column>
  </el-table>

  <div class="add_box" v-show="showChange">
    <div style="height: 30px;line-height: 30px;text-align: center;margin-top: 10px">添加课程问题</div>
    <input type="text" v-model="QueCid" placeholder="请输入课程id">
    <input type="text" v-model="QueName" placeholder="问题内容">
    <button v-show="showAdd" @click="addChangeTrue" style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none">编辑</button>
    <button v-show="showChangeBtn" @click="addBianTrue" style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none">编辑</button>
    <button @click="addFalse" style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none">取消</button>
  </div>

</div>
  <el-table :data="answerData" style="width: 100%" v-show="showdata">
 <el-table-column prop="replyContent" label="答案内容" width="180"/>
<el-table-column prop="replyTime" label="答案时间" width="180"/>
<el-table-column prop="memberId" label="回复人编号" width="180"/>

    </el-table>
</template>

<style scoped>

.box{
  margin-top: 20px;
}
.add_box{
  background-color: white;
  height:600px;
  width: 420px;
  position: absolute;
  top: 200px;
  left: 43%;
  z-index: 9;
  /* display: flex;
   flex-wrap: wrap;*/
  border: deepskyblue solid 2px;
  border-radius: 10px;
}
.add_box input{
  display: block;
  height: 25px;
  width: 300px;
  margin-top: 9px;
  margin-left:50px;
  padding: 5px;
}
.add_box button{
  margin-top: 10px;
  margin-left: 65px;
}

</style>